<template>
	<div>
		<div class="point-box">
			<div class="btn-box">
				<div class="btn-box-item">
					<el-button :class="['btn', { active: search.io == item.value }]" round v-for="item in ioList" :key="item.value" @click="search.io = String(item.value)">{{
						item.label
					}}</el-button>
				</div>

				<div class="my-points">
					我的积分：<span>{{ userInfo.usableIntegral }}</span>
				</div>
			</div>

			<div class="content-box">
				<el-table :data="list" style="width: 100%">
					<el-table-column prop="content" align="center" label="内容" />
					<el-table-column prop="createTime" align="center" label="时间" />
					<el-table-column prop="ioDesc" align="center" label="类型">
						<template #default="scope">
							<span v-if="scope.row.io == 'input'" style="color: #34c758">收入</span>
							<span v-if="scope.row.io == 'output'" style="color: #ff3a30">支出</span>
						</template>
					</el-table-column>
					<el-table-column prop="integral" align="center" label="积分" />
				</el-table>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="PointsDetailed">
import { IDictL } from "@/service/interface/base";
import { pointsGetDetailed } from "@/service/modules/points";
import { useUserStore } from "@/store/user";

export interface IPoints {
	content: string;
	time: string;
	type: string;
	points: number;
}

const { userInfo } = storeToRefs(useUserStore());

const ioList: IDictL[] = [
	{ label: "全部", value: "all" },
	{ label: "收入", value: "input" },
	{ label: "支出", value: "output" }
];

const search = ref({
	io: "all"
});
const list = ref([]);
const getList = async () => {
	const { data } = await pointsGetDetailed(search.value);
	list.value = data.list;
};

onMounted(() => {
	getList();
});
</script>

<style scoped lang="scss">
.point-box {
	.btn-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16px;
		margin-bottom: 10px;
		background-color: #ffffff;
		border-radius: 4px;
		.btn-box-item > .btn {
			width: 80px;
			height: 32px;
			font-size: 14px;
			&:hover {
				color: var(--el-button-text-color);
				background-color: var(--el-button-bg-color);
				border-color: var(--el-button-border-color);
			}
			&.active {
				color: #ffffff;
				background-color: #c39f63;
				border: 0;
			}
		}
		.my-points {
			display: flex;
			align-items: center;
			font-size: 16px;
			span {
				font-size: 28px;
				color: #c39f63;
			}
		}
	}
	.content-box {
		height: 520px;
		padding: 20px;
		background-color: #ffffff;
	}
	.el-table {
		--el-bg-color: #f3ece0;
		--el-table-header-text-color: #c39f63;
	}
}
</style>
